<style scoped>
   .doclist .shark {
        padding: 0 30px;
    }

   .doclist .fast {
        font-size: 20px;
        color: #f39312;
        letter-spacing: 1px;
    }

    .doclist .main .ivu-select,
    .main .ivu-input {
        border-radius: 0 2px 2px 0;
    }

    .doclist .common-box-body {
        padding-top: 24px;
    }
    .doclist .fixed-bottom{
        padding-left: 30px;
        padding-right: 40px ;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }
    .doclist .sidehide{
        left: 75px;
    }
    .doclist .detail{
        margin-top: 20px ;
        margin-bottom: 15px !important;
    }
</style>
<style>
    .doclist .common-box-body .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
    .common-box-body .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
        padding-right: 0px;
    }

    .doclist .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
        color: #2d8cf0;
        border-color: transparent;
        background-color: #FFF;
    }

    .doclist .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
        color: #808080;
        border: 1px solid #dddee1;
        border-bottom: 0;
    }
    .doclist button.ivu-btn{
        border-radius:2px !important;
    }
</style>


<template>
    <div class="doclist">
        <product-title></product-title>
        <div class="shark"  style="padding:0 30px;">
            
            <div class="common-box-body">
                <Row style="margin-top:20px;" v-if="$isShow('yun_org_cate/create')">
                    <Col :md="24" :lg="2" offset='22'>
                        <Button size="large" class="fr"  type="warning" icon="plus" @click="addNewCate">新增</Button>
                    </Col>
                </Row>
         
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table  ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="cateList" class=""></Table>
                    </div>                        
                </div>
            </div>
            <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="12">
                        <Button type="error" v-if="$isShow('yun_org_cate/del')"  :disabled="tableaction" size="large" class="fl mr10 " @click="remove">删除</Button>
                        <Button type="info" v-if="$isShow('yun_org_cate/update')"  :disabled="tableaction" size="large" class="fl mr10" @click="toDetail">编辑</Button>
                        <!-- <Button type="success" :disabled="tableaction" size="large" class="fl mr10" @click="modalTrue">设置账号</Button> -->
                    </Col>
                </Row>
            </div>
        </div>
        <Modal v-model="showAddModal" ok-text="提交" :mask-closable='closeable' width="600" title="新增/编辑机构" @on-ok="add" @on-cancel="cancel" :loading="loading" class-name="common-box-body showAddModal">
            <Row>
                <Col>
                    <Form :model="org" ref="org" :rules="ruleValidate"  >
                        <Form-item label="机构名称" prop="name" required>
                            <Input v-model="org.name" placeholder="请输入机构名称"></Input>
                        </Form-item>
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import { createCate , getCateList , updateCate , delCate } from '../../api/yun_org' 
    export default {
        data() {

            return {
            p:1,//对页面页数的定义-->初始化
            pagesize:10,//对页面的定义,出事定义10条数据
            detailTotal: 0,
            showAddModal:false,//点击设置,弹出模态框
            closeable: false,//shif按ese按钮退出
            loading: true,
            tableaction:true, 
            jiance:false,
            currentpage:1,
            formdata:{
                p:1,//对页面页数的定义-->初始化
                pagesize:10,//对页面的定义,出事定义10条数据
                agency_code:"",//机构代码
                shortn:'',//机构简称
                cate:'',//公司类型
            } ,
            cateList:[],
            columns1:[
                {
                    title: '序号',
                    type: 'index',
                    
                    align: 'center',
                },
                {
                    title: '机构名称',
                    key: 'name',
                    align:'center',
                },
                {
                    title: '添加时间',
                    key: 'create_time',
                    align:'center'
                },
            ],
            permission_list:[],
            orgList:[

            ],
            roleList:[],
            org:{
                name:'',//机构名

            },
            ruleValidate: {
                name:[
                    { required: true, message: '机构名不能为空', trigger: 'blur' }
                ],
            },
            }
        },
        components: {
            productTitle
        },
        created() {
            
        },
        computed: {
            slidetoggle(){
                return this.$store.state.sildeshow
            },
        },
        mounted () {
            this.getList()
        },
        methods: {
            addNewCate(){
                this.org = {}
                this.showAddModal = true
            },
            add(){
                this.$refs['org'].validate((valid) => {
                    if (valid) { 
                        new Promise((resolve, reject) => {
                            if(!this.org.id){
                                createCate(this.org).then(response => {
                                    if (response.data.err == 0) {
                                        this.$Message.success(response.data.info);
                                        this.showAddModal = false
                                        this.getList()
                                    } else {
                                        this.$Message.error(response.data.info);
                                    }
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true;
                                        });
                                    }, 2000);
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true; 
                                        });
                                    }, 2000);
                                });
                            }else{
                                updateCate(this.org).then(response => {
                                    if (response.data.err == 0) {
                                        this.$Message.success(response.data.info);
                                        this.showAddModal = false
                                        this.getList()
                                    } else {
                                        this.$Message.error(response.data.info);
                                    }
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true;
                                        });
                                    }, 2000);
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.$nextTick(() => {
                                            this.loading = true; 
                                        });
                                    }, 2000);
                                });
                            } 
                        });
                    }else{
                        setTimeout(()=>{
                            this.loading = false;
                             this.$nextTick(() => {
                                this.loading = true;
                            });
                        },2000)
                       
                    }
                })
            },

            //获取页面信息getList
            getList(){   
                new Promise((resolve, reject) => {
                    getCateList().then(response => {
                        if (response.data.err == 0) {
                            this.cateList = response.data.data;
                            
                        } else {
                            this.$Message.error(response.data.info);
                            this.detailTotal = 0;
                            this.cateList = []
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            
            // 选中表单的其中一项,进行数据删除处理
            //选中当前行数据
            tableCurrentChange(currentRow,oldCurrentRow){
                    this.tableaction = false;
                    this.current = currentRow;
                    console.log(this.current,'当前数据信息')
                    this.org = Object.assign({},this.current)
                    this.current.mogon_id=currentRow._id
                    if(this.current.name =='总公司' || this.current.name =='分公司' || this.current.name =='营业部'){
                        this.tableaction = true
                    }
            },
            //点击编辑
            toDetail(){
                this.showAddModal = true
            },
            // 点击删除执行删除选中的table操作
            remove() {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        var _param = {
                            id:this.current.id
                        }
                        new Promise((resolve, reject) => {
                            delCate(_param).then(response => {
                                console.log(response.data,"查看状态",response.data.info)
                                if(response.data.err == 0){
                                     this.$Message.success(response.data.info);
                                    //  this.getList();
                                     location.reload();
                                }else {
                                    this.$Message.error(response.data.info);
                                }                        
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    },
                });
            },
            cancel () {
                this.$refs['org'].resetFields(); 
            },
    },
    
    }
</script>